<template>
    <div class="global">
    
<div>

    <el-button size="mini" type="primary" plain @click="add()">新增</el-button>

</div>         
        <div class="table">
            <el-table :data="tableData" stripe>
                <el-table-column type="index" width="100" label="序号" align="center" sortable></el-table-column>


                <el-table-column prop="boardName" label="板块名称">

                </el-table-column>
            

                <el-table-column label="操作" align="center" width="300" fixed="right">
                    <template v-slot="scope">
                        <el-button size="mini" type="primary" plain @click="edit(scope.row)">编辑</el-button>

                        <el-button size="mini" type="danger" plain @click="del(scope.row.boardId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="pagination" style="margin-top: 10px;display: flex;justify-content: right;">
                <el-pagination background @current-change="handleCurrentChange" :current-page="queryform.pageNo"
                    :page-sizes="[5, 10, 20]" :page-size="queryform.pageSize" layout=" prev, pager, next"
                    :total="total">
                </el-pagination>
            </div>
        </div>
        <el-dialog v-model="dialogTableVisible" title="板块" width="300">

            <el-form :model="form" :rules="rules" ref="loginform" label-position="left" label-width="0px"
                class="login-form">
                <el-form-item prop="pboardId">
                    <el-select  v-model="form.pboardId" placeholder="请选择板块">
                        <el-option v-for="item in boardlist" :label="item.boardName" :value="item.boardId"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="boardName">
                    <el-input  v-model="form.boardName" placeholder="请输入名称"></el-input>
                </el-form-item>
             

                <el-form-item style="width: 100%;">
                    <el-button type="primary" style="width: 100%;" @click="submit">确定</el-button>
                </el-form-item>
            </el-form>
  </el-dialog>

    </div>
</template>
<script setup>
import { ElMessageBox } from "element-plus";
import { onMounted, ref } from "vue";
import service from "../utils/request";

const queryform = ref({

    pageNo: 1
});
const boardlist=ref([]);
const form=ref({});
const tableData = ref([])
const total = ref(0)
const dialogTableVisible=ref(false)
const handleCurrentChange = (e) => {
    queryform.value.pageNo = e;
    getlist()
}
const submit=async()=>{
    if(!form.value.pboardId){
        form.value.pboardId=0
    }
    const res=await service.get("/board/addandupdate",{
        params:form.value
    })
    console.log(res)
    dialogTableVisible.value=false;
    getlist()
}
onMounted(() => {
    getlist()
    getboardlist()
})
const add=()=>{
    dialogTableVisible.value=true
    form.value={}
}
const edit=(row)=>{
    dialogTableVisible.value=true;
    form.value.boardId=row.boardId;
    form.value.pboardId=row.pboardId
    form.value.boardName=row.boardName

}
const getboardlist=async()=>{
const res=await service.get("/board/all");
console.log(res)
boardlist.value=res.data
}
const search = () => {
    queryform.value.pageNo = 1;
    getlist()
}
const research = () => {
    queryform.value = {}
    queryform.value.pageNo = 1;
    getlist()
}
const del = (id) => {
    ElMessageBox.confirm(
        '是否确认删除？',
        '确认信息',
        {
            confirmButtonText: 'OK',
            cancelButtonText: 'Cancel',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await service.get("/board/delete", {
                params: {
                    boardId: id
                }
            })
            if (res.code == 1) {

                getlist()
            }

        })
        .catch(() => {
            ElMessage({
                type: 'info',
                message: 'Delete canceled',
            })
        })
}
const getlist = async () => {
    const res = await service.get("/board/list", {
        params: queryform.value
    })
    console.log(res)
    tableData.value = res.data.records
    total.value = res.data.total
}

</script>
<style scoped>
.global {
    width: 100%;
    height: 100%;
    padding: 10px;
    box-sizing: border-box;
    background: #fff;
}
</style>